<template>
    <div class="icon">
      <swiper :options="swiperOption" >
        <!-- slides -->
        <swiper-slide v-for="icon in page" :key="icon.index">
          <div class="icon_list" v-for="itm in icon" :key="itm.id">
            <img :src="itm.imgUrl" :alt="itm.title">
            <p>{{itm.title}}</p>
          </div>
        </swiper-slide>
        <!-- Optional controls -->
        <div class="swiper-pagination"  slot="pagination"></div>
      </swiper>

    </div>
</template>
<script>
  export default{
    data(){
      return {
        swiperOption: {
          loop:true,
          pagination:{
            el:".swiper-pagination"
          }
        },

      }
    },
    props:["iconList"],
    computed:{
      page(){
        let pages=[];
        this.iconList.forEach((itm,index)=>{
          let a = Math.floor(index/8);
          if(!pages[a])pages[a]=[];
          pages[a].push(itm)
        });
        return pages
      }
    }
  }
</script>
<style scoped>
  .icon_list{
    width:25%;
    float: left;
  }
  .icon_list img{
    display: block;
    margin:0 auto;
    width:.55rem;
    height: .55rem;
  }
  .icon_list p{
    text-align: center;
    font-size: .14rem;
    padding:.05rem 0;
  }
 .swiper-container-horizontal > .swiper-pagination-bullets {
    bottom: 0rem;
  }
  .swiper-container{
    padding-top: .1rem;
    padding-bottom: .3rem;
  }
  .icon{
    background: #fff;
  }
</style>
